<template>
  <view class="container">
    <!-- 顶部医院名称 -->
    <view class="header">
      <image class="logo" src="/static/content/yiyuan.png"></image>
      <text class="hospital-name">医疗服务</text>
    </view>

    <!-- 搜索栏 -->
    <view class="search-bar">
      <input class="search-input" placeholder="搜索科室、医生" />
	  
	  <!-- 这是一个滚动视图 -->
    </view>
			<view class="classify_scroll_x">
				<scroll-view scroll-x="true" >
					<view class="scroll-view-item_H scroll-view-item_selected">内科</view>
					<view class="scroll-view-item_H">外科</view>
					<view class="scroll-view-item_H">内分泌科</view>
					<view class="scroll-view-item_H">外分泌科</view>
					<view class="scroll-view-item_H">钢门课</view>
					<view class="scroll-view-item_H">未知科</view>
					<view class="scroll-view-item_H">天天科</view>
				</scroll-view>
			</view>

    <!-- 轮播广告 -->
  <view class="uni-margin-wrap">
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item>
				<image src="/static/content/yiyuanDemo1.jpg" ></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/content/yiyuanDemo2.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/content/yiyuanDemo3.jpg"></image>
			</swiper-item>
		</swiper>
  	</view>	
  </view>
  <view class="container2">
  	<!-- 三个功能按钮 -->
  	<view class="sangegongneng">
  		<uni-grid :column="3" :showBorder="false"  :square="false" class="uni-grid1">
  			<uni-grid-item class="uni-grid1-img1">
  				
  				<image src="/static/content/yuyue.png"  class="grid-image-special"></image>
  			</uni-grid-item>
  			<uni-grid-item  class="uni-grid1-img2">
  				
  				<image src="/static/content/wenzhen.png" class="grid-image-special"></image>
  			</uni-grid-item>
  			<uni-grid-item class="uni-grid1-img3">
  				
  				<image src="/static/content/baogao.png" class="grid-image-special" ></image>
  			</uni-grid-item>
  		  
  		</uni-grid>
  	</view>
	
	<view class="uni-grid_card">
	
		<!-- 卡片提醒 -->
		<view class="card-reminder">
		  <text>初次使用请添加就诊卡</text>
		  <button class="add-card-button">添加就诊卡</button>
		</view>
		
	</view>
	
	

	
<!-- 模式切换按钮 -->
		<view class="toggle-btn">
		  <button @click="toggleView">{{ isGrid ? '切换为列表模式' : '切换为宫格模式' }}</button>
		</view>
	
	   <!-- 医生列表开始 -->
	   <view class="doctorList">
		 <unicloud-db v-slot:default="{data, loading, error, options}" collection="doctor-service">
		   <view v-if="error">{{error.message}}</view>
		   <view v-else>
			 <!-- 列表模式 -->
			 <uni-list v-if="!isGrid">
			   <uni-list-item v-for="(item, index) in data" :key="index">
				 <template v-slot:header>
				   <view class="slot-box">
					 <image
					   class="slot-image"
					   :src="item.doctorImage && item.doctorImage.url ? item.doctorImage.url : 'default-image.png'"
					   mode="widthFix"
					 ></image>
					 <view class="doctor-info">
					   <view class="name">
						 <text>{{ item.doctorImage }}</text>
					   </view>
					   <view class="title">
						 <text>性别 | {{ item.gender }}</text>
					   </view>
					   <view class="department">
						 <text>所属医院 | {{ item.hospital }}</text>
					   </view>
					   <view class="specialties">
						 <text>科室分类 | {{ item.classify }}</text>
					   </view>
					   <view class="fee">
						 <text class="registrationFee">挂号费 ¥ {{ getYuan(item.registrationFee) }}</text>
					   </view>
					 </view>
				   </view>
				 </template>
			   </uni-list-item>
			 </uni-list>
	   
			 
			<!-- 宫格模式 -->
			
			   <view class="grid-mode" v-else>
				<uni-grid :column="2" :show-border="false">
				  <uni-grid-item v-for="(item, index) in data" :key="index">
					<view class="grid-item-box">
					  <image
						class="grid-image"
						:src="item.doctorPicture && item.doctorPicture.url ? item.doctorPicture.url : 'default-image.png'"
						mode="aspectFill"
					  />
					  <view class="grid-text">
						<view class="name">{{ item.doctorName }}</view>
						<view class="title">{{ item.gender }}</view>
						<view class="department">{{ item.hospitals }}</view>
						<view class="fee">挂号费 ¥ {{ getYuan(item.registrationFee) }}</view>
					  </view>
					</view>
				  </uni-grid-item>
				</uni-grid>
			  </view>
			  </view>
		 </unicloud-db>
	   </view>
	   <!-- 医生列表结束 -->
		
	
	
	
  </view>
  
</template>

<script>
export default {
	data() {
		return {
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			isGrid: false, // 默认列表模式
			gridItems: [
			            { text: '门诊签到', imgSrc: '/static/content/menzhenqiandao.png' },
			            { text: '医技签到', imgSrc: '/static/content/yijiqiandao.png' },
			            { text: '排队候诊', imgSrc: '/static/content/paiduihouzhen.png' },
			            { text: '智能导诊', imgSrc: '/static/content/zhinengdaozhen.png' },
			            { text: '门诊缴费', imgSrc: '/static/content/menzhenjiaofei.png' },
			            { text: '门诊充值', imgSrc: '/static/content/menzhenchongzhi.png' },
			            { text: '充值退费', imgSrc: '/static/content/chongzhituifei.png' },
			            { text: '电子发票', imgSrc: '/static/content/dianzifapiao.png' }
			        ]
		}
	},
	  methods: {
	    onClickItem(e) {
	      if (this.current !== e.currentIndex) {
	        this.current = e.currentIndex;
	      }
	    },
	    goToGridPage() {},
	    getYuan(data) {
	      let yuan = Math.floor(data / 100);
	      let fen = data % 100;
	      if (fen == 0) fen = "00";
	      return yuan + '.' + fen;
	    },
	    toggleView() {
	      this.isGrid = !this.isGrid; // 切换展示模式
	    }
	  }
}
</script>

<style>
.classify_scroll_x{
		white-space: nowrap;
		width: 650rpx;
		background-color: #FFFFFF;
		margin-top: 5rpx;
		margin-bottom: 8rpx;
	}
.scroll-view-item_H {
	display: inline-block;
	width: 140rpx;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	font-size: 12rpx;
}
.scroll-view-item_selected{
	border-bottom: 2px solid red;
}
.page{
		background-color: #EEEEEE;
		
	}
	
.container {
  padding: 20px;
}

.header {
  display: flex;
  align-items: center;
  padding-bottom: 0px;
  background-color: #FFFFFF;
}

.logo {
  width: 50px;
  height: 50px;
}

.hospital-name {
  font-size: 18px;
  margin-left: 10px;
}

.search-bar {
  margin: 5px 0;
  display: flex;
  align-items: center;
}

.search-input {
  flex: 1;
  height: 40px;
  border-radius: 20px;
  padding: 0 15px;
  border: 1px solid #ccc;
}

.swiper-container {
  height: 150px;
  margin-top: 10px;
}

.banner-image {
  width: 100%;
  height: 100%;
}

.function-buttons {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.button {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.button-icon {
  width: 50px;
  height: 50px;
}

.card-reminder {
    background-color: #fff; /* 设置背景色 */
    border-radius: 10px; /* 设置圆角 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 卡片阴影 */
    padding: 20px; /* 内边距 */
    text-align: center; /* 文本居中 */
    margin-top: 20px; /* 上边距 */
}

.uni-margin-wrap {
	width: 690rpx;
	width: 100%;
	background-color: #FCFCFC;
	
}
.swiper {
	height: 300rpx;
	width: 100%;
	overflow: hidden; /* 确保内容不会溢出 */
	border-radius: 20px; /* 设置轮播图的圆角 */

}
.swiper-item {
	display: block;
	height: 300rpx;
	width: 100%;
	line-height: 300rpx;
	text-align: center;
	
}

.add-card-button {
  background-color: #02C9A9;
  color: white;
  font-size: 20px; /* 调整字体大小 */
  padding: 12px 40px; /* 调整按钮内边距，增大按钮大小 */
  border-radius: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  width: 200px; /* 固定按钮的宽度 */
  height: 45px; /* 固定按钮的高度 */
 display: flex; /* 使用 flexbox 布局 */	
	justify-content: center; /* 水平居中 */
	align-items: center; /* 垂直居中 */
}
.grid-item-box{
	border-radius: 30px;
	text-align: center;
	
	
}.grid-item-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #fff;
	
	
}

.grid-text {
   
    font-size: 14px;
    text-align: center;
}
.text{
	text-align: center;
}


.uni-grid1-img1, .uni-grid1-img2, .uni-grid1-img3 {
	
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       width: 100%;
       height: 100%;
       background-color: #fff;
	   border-radius: 10px; /* 圆角效果 */
	   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 卡片阴影 */
	   flex: 1; /* 使每个 item 等分宽度 */
	   max-width: 30%; /* 设置最大宽度，确保三个 item 水平排列 */
	   box-sizing: border-box; /* 包括内边距和边框在内的宽度计算 */
	   margin: 0px 5px;
	   /* margin: 0px 5px; */
	  /* margin-top: 20px; */
}

.grid-image {
    width: 90%;
    height:90%;
    object-fit: contain;
}
.uni-grid1{

	  display: flex; /* 使用 flex 布局 */
	    justify-content: space-around; /* 平均分配间距 */
	    flex-wrap: wrap; /* 允许换行 */	
		padding: 0;
		margin: 10px 0px;
}
.grid-image-special {
    width: 110px;
    height: 90px;
    object-fit: contain;
}
.grid-container{
	
	background-color:#F7F7FA; /* 设置背景色 */
	border-radius: 30px; /* 圆角效果 */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 卡片阴影 */
	padding: 20px; /* 内边距，给内容留出空间 */
	margin-top: 0px; /* 与上方元素分隔 */
	
}
.container2{
	background-color: #F7F7FA;
	border-radius: 30px;
}
.card-reminder{
	padding:10px;
	margin: 0px;
	text-align: center;
	color: #999998;
	
}
.grid-container-uni-section{
	border-radius: 20px; /* 圆角效果 */
}
.uni-grid_card{
	background-color:#F7F7FA; /* 设置背景色 */
	padding: 20px; /* 内边距，给内容留出空间 */
	margin: 0%;
}
.sangegongneng{
	border-radius: 30px;
	margin: 0px 20px;
}
.swiper-item image{
	height: 100%;
	width: 100%;
	object-fit: cover;
}



</style>
